$title-height: 45px;
$sidebar-width: 300px;
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
body{
  margin: 0; padding: 0;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;  /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
  border-radius: 4px;  /* 轨道圆角 */
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1; /* 滚动条滑块颜色 */
  border-radius: 4px;  /* 滑块圆角 */
  transition: background 0.3s ease; /* 过渡效果 */
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 鼠标悬停时滑块颜色 */
}

/* Firefox 滚动条样式 */
:root {
  scrollbar-width: thin; /* 滚动条宽度: auto, thin, none */
  scrollbar-color: #c1c1c1 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

/* 暗色模式下的滚动条样式 */
html.dark ::-webkit-scrollbar-track {
  background: #2d2d30; /* 暗色模式下轨道背景色 */
}

html.dark ::-webkit-scrollbar-thumb {
  background: #6b6b6b; /* 暗色模式下滑块颜色 */
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #8a8a8a; /* 暗色模式下鼠标悬停时滑块颜色 */
}

html.dark {
  scrollbar-color: #6b6b6b #2d2d30; /* 暗色模式下的Firefox滚动条颜色 */
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}